<template>
    <div class="user-profile-container">
         <!-- 导航 -->
        <van-nav-bar
            class="app-nav-bar"
            title="个人信息"
            left-arrow
            @click-left="$router.back()"
        />
        <!-- 导航 -->
        <input type="file" hidden  ref="file" accept="image/*" @change="onChangeFile" />
        <van-cell title="头像" is-link center @click="$refs.file.click()">
            <van-image
                class="avatar"
                round
                fit="cover"
                :src="user.photo"
            />
        </van-cell>
        <van-cell title="昵称" is-link :value="user.name" @click=" isShowEditPopup = true "></van-cell>
        <van-cell title="性别" is-link :value="getSex" @click=" isShowEditGenderPopup = true "></van-cell>
        <van-cell title="生日" is-link :value="user.birthday" @click=" isShowEditBirthdayPopup = true "></van-cell>


        <!-- 弹出层部分 -->
        <!-- 修改昵称弹出层 -->
        <van-popup 
            v-model="isShowEditPopup" 
            position="bottom"
            style="height:100%"
        >
            <!-- @update-name=" user.name = $event " 
                当需要传递参数和绑定事件的是否，那么我们可以使用 v-model这个属性绑定
                v-model实质是一个input输入框的绑定，以及父组件的数据传递
                :value="user.name" 
                @input=" user.name = $event "
             -->
            <update-name v-if="isShowEditPopup" :user-name="user.name" @close=" isShowEditPopup = false "  @update-name=" user.name = $event "  />
        </van-popup>
        <!-- 修改昵称弹出层 -->

        <!-- 修改性别弹出层 -->
        <van-popup 
            v-model="isShowEditGenderPopup" 
            position="bottom" 
        >
            <update-gender @close=" isShowEditGenderPopup = false " v-model="user.gender" />
        </van-popup>
        <!-- 修改性别弹出层 -->
        <!-- 修改生日弹出层 -->
        <van-popup
            v-if="isShowEditBirthdayPopup"
            v-model="isShowEditBirthdayPopup" 
            position="bottom" 
        >
            <update-birthday @close=" isShowEditBirthdayPopup = false " v-model="user.birthday" />
        </van-popup>
        <!-- 修改生日弹出层 -->

        <!-- 修改头像弹出层 -->
        <van-popup
            v-if="isShowEditAvatarPopup"
            v-model="isShowEditAvatarPopup"
            style="height:100%"
            position="bottom" 
        >
            <update-avatar 
                :file="preViewImg" 
                @close=" isShowEditAvatarPopup = false " 
                @update-avatar=" user.photo = $event " />
        </van-popup>
        <!-- 修改头像弹出层 -->
        <!-- 弹出层部分 -->
    </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import updateName from './components/update-name'
import updateGender from './components/update-gender'
import updateBirthday from './components/update-birthday'
import updateAvatar from './components/update-avatar'
    export default {
        name: 'userProfile',
        components:{
            updateName,
            updateGender,
            updateBirthday,
            updateAvatar
        },
        data() {
            return {
                user:{}, //用户的基本信息
                isShowEditPopup: false, //修改昵称的状态
                isShowEditGenderPopup: false, //修改性别的状态
                isShowEditBirthdayPopup: false, //修改出生日期的状态
                isShowEditAvatarPopup: false, //修改头像的状态
                preViewImg: '', // 用户选择的图片路径
            }
        },
        methods: {
            async loadUserProfile(){
                const { data } = await getUserProfile();
                this.user = data.data
            },
            // 选择图片
            onChangeFile(){
                // 准备图片的数据
                const bom = this.$refs.file.files[0]
                // const bom = window.URL.createObjectURL(this.$refs.file.files[0])

                this.preViewImg = bom

                // 显示弹出层
                this.isShowEditAvatarPopup = true
                // 防止选择文件不触发change事件
                this.$refs.file.value = ''
            }
        },
        created() {
            this.loadUserProfile();
        },
        computed:{
            getSex(){
                return this.user.gender === 0 ? '男' : '女'
            }
        }
    }
</script>

<style lang="less" scoped>
.avatar{
    width: 25px;
    height: 25px;
}
.van-popup{
    background-color: rgb(245, 247, 249);
}
</style>